<template>
    <!--我的商品页面-->
  <div class="mygoods">
     <div class="bg_colorff p_l30 p_r30 border_bcolor0D">
       <div class="pickupgoodstype flex  font_size28 color_33 ">
         <div class="flex-1">选择提货方式</div>
         <div class="flex-1">
          <span @click="changekdtypeFn">
            <img v-if="iskuaiditype" class="check_img" src= '../../assets/img/icon/circle.png'/>
            <img v-if="!iskuaiditype" class="check_img" src='../../assets/img/icon/circle_checked.png'/>快递
          </span>
           <span class="m_l20" @click="changekdtypeFn">
            <img v-if="!iskuaiditype" class="check_img" src='../../assets/img/icon/circle.png'/>
            <img v-if="iskuaiditype" class="check_img" src='../../assets/img/icon/circle_checked.png'/>自提
          </span>
         </div>
       </div>
       <div class="font_size28" >
         <div class="flex p_b30" v-if="iskuaiditype" >
           <div class="color_33 leftlable ">自提地址</div>
           <div class="flex-1 color_33 t_right" @click="choosedstoreFn"><span v-if="!city_addressname">新增提货地址</span><span v-if="storename">{{storename}}</span></div>
           <div><img class="left_icon t_right" src="../../assets/img/icon/jiantou_left.png" /></div>
         </div>
         <div v-if="!iskuaiditype">
           <div class="flex p_t30">
             <div class="color_33 leftlable ">收货地址</div>
             <div class="flex-1 color_33 t_right" @click="chooseadinfoFn"><span v-if="!city_addressname">新增提货地址</span><span v-if="city_addressname">{{city_addressname}}</span></div>
             <div><img class="left_icon t_right" src="../../assets/img/icon/jiantou_left.png" /></div>
           </div>
           <div class="flex line90">
             <div class="leftlable">联系方式</div>
             <div class="flex-1">{{username}}  {{userphone}}</div>
           </div>
         </div>
       </div>
   </div>

    <div class="goodslist p_r20 p_l20">
      <div class="goodslist_item m_t20 p_t30 p_b20 p_r20 p_l20 bg_colorff" v-for="(goods, index) in goodslist" :key="index">
        <div class="border_b p_b30">
          <div class="font_size28 color_33">商品名称： {{goods.goods_name}}</div>
          <div class="flex m_t20 color_33 font_size24">
            <div class="m_r20">商品总数量: {{goods.total_number}}</div>
            <div class="m_l20">可提货数量: {{goods.pick_number}}</div>
          </div>
        </div>
        <div class="flex p_t10">
          <div class="line90">提货数量</div>
          <div class="numbox">
            <span class="numjisuan" @click="jiannumFn(index)"><img class="jian_icon" src="../../assets/img/icon/jian.png" /></span>
            <input type="number" class="inputnum" v-model="goods.num" placeholder="输入提货数量"/>
            <span class="numjisuan" @click="jianumFn(index)"><img class="jia_icon" src="../../assets/img/icon/jia.png"/></span>
          </div>
        </div>

      </div>
    </div>

    <div class="footer bg_colorff ">
      <div class="flex">
        <div class="flex-1"></div>
        <div class="m_r20 color_33" v-if="!iskuaiditype"><span class="font_size24">邮费</span><span class="font_size28">￥0.00</span></div>
        <div class="tuihuobtn t_center font_size32 " @click="tihupFn">提货</div>
      </div>
    </div>

    <store-list v-if="isStore"></store-list>

    <div class="layer" v-if="ischickzhifu">
      <div class="layerbox zhibubox" v-if="iszhifu">
        <div class="line90 border_b t_center font_size32 color_33">选择快递需支付邮费</div>
        <img @click="closeFn" class="close_img" src="../../assets/img/icon/close_zhifu.png" height="25" width="25"/>
        <div class="jine_info t_center">
          <div class="font_size24 color_99">支付费用</div>
          <div class="jin_e">￥30.00</div>
        </div>
        <div class="p_rl40">
          <div class="font_size24 color_33 ">选择支付方式</div>
          <div class="font_size28 color_33 p_b30 p_t30 border_b flex" @click="checkzhifutypeFn">
            <div>余额支付 <span>￥{{balace}}</span></div>
            <div class="t_right flex-1" v-if="!isgougou"><img class="gougou_icon" src="../../assets/img/icon/gougou.png" /></div>
          </div>
          <div class="font_size28 color_33 p_b20 p_t20 border_b flex" @click="checkzhifutypeFn">
            <div>微信支付</div>
            <div class="t_right flex-1" v-if="isgougou"><img class="gougou_icon" src="../../assets/img/icon/gougou.png" /></div>
          </div>
          <div class="zhifu_btn" @click="goPayFn">支付</div>
        </div>
      </div>

        <div class="layerbox zhibufailbox" v-if="tihuofail">
          <div class="fail_info t_center">
            <img class="fail_img" src="../../assets/img/fail.png" height="180" width="180"/>
            <div class="font_size32 color_33 p_t30 p_b30">支付失败</div>
            <div class="font_size28 color_66 ">请重新提货</div>
          </div>
          <div class="p_rl40">
            <div class="zhifu_btn">确定</div>
          </div>

      </div>
    </div>
  </div>

</template>

<script>
  import StoreList from '../../components/city/StoreCity';

    export default {
      name: "center_goods",
      data(){
          return{
            iskuaiditype: false,
            isStore: false,
            // city_addressname: '',
            // city_addressid: '',
            nums: null,
            goodslist: [],
            checkorder: [],
            tihtypes: 1,
            ischickzhifu: false,
            isgougou: false,
            iszhifu: false,
            tihuofail: false,
            // storeid: '',
            storeinfo: '',
            postage: '',
            pay_type: 2,
            addressinfo: '',
            balace: ''
          }
      },
      components: {StoreList},
      // watch: {
      //
      // },
      computed:{
        city_addressname(){
          return this.$store.state.address_name?this.$store.state.address_name: this.addressinfo.detail +this.addressinfo.address
        },
        city_addressid(){
          return this.$store.state.address_id?this.$store.state.address_id: this.addressinfo.id
        },
        username(){
          return this.$store.state.address_username?this.$store.state.address_username:this.addressinfo.real_name
        },
        userphone(){
          return this.$store.state.address_userphone?this.$store.state.address_userphone: this.addressinfo.mobile
        },
        storename(){
          return this.$store.state.storeinfo.store_name
        },
        storeid(){
          return this.$store.state.storeinfo.store_id
        }
      },

      mounted(){
        var self = this
        // self.city_addressname = self.$store.state.address_name
        // self.city_addressid = self.$store.state.address_id
        console.log(self.$store.state.address_name)
      },
      created(){
        this.getgoodsList()
        this.getdefaltaddFn()
        this.balace = this.$store.state.balace_money
      },
      beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        if(to.fullPath == '/center'){
          this.$destroy()
          to.meta.keepAlive = false
          from.meta.keepAlive = false
        }; // C 跳转到 A 时让 A 不缓存，即刷新
        next();
      },
      destroyed(){
        this.$router.app._route.meta.keepAlive = false
        this.$store.commit('setaddressid', '')
        this.$store.commit('setaddresscityinfo', '')
        this.$store.commit('setaddressusername', '')
        this.$store.commit('setaddressuserphone', '')
        this.$store.commit('setstoreinfo', '')
      },
      methods: {
        changekdtypeFn(){
          var self = this
          self.iskuaiditype = !self.iskuaiditype
        },
        //获取商品列表
        getgoodsList(){
          var self = this
          self.$util.get('user/getUserGoodsList',{
            uid: self.$store.state.userinfo.uid
          }).then(data => {

            if(data.status == 1){

              console.log(data.data)

              data.data.list.forEach(item => {
                item.num = null
              })
              self.goodslist = data.data.list
              self.postage = data.data.postage

            }

          })
        },
        getdefaltaddFn(){
          this.$util.get('address/getUserAddressList',{
            uid: this.$store.state.userinfo.uid
          }).then(data =>{
            if(data.status ==  1){
               if(data.data.length > 0){
                 data.data.forEach(item => {
                   if(item.is_default == 1){
                     this.addressinfo = item
                   }
                 })
               }
               console.log(this.addressinfo)
            }
          })
        },
        //选择地址
        chooseadinfoFn(){
          this.$router.push({path: '/address', query: {type: 1}})
        },
        choosedstoreFn(){
          this.isStore = !this.isStore
        },
        jiannumFn(index){
          if(!this.goodslist[index].num){
            this.$toast('请输入提货数量')
            return
          }
          if(this.goodslist[index].num < 1){
            return
          }
          this.goodslist[index].num --
        },
        jianumFn(index){
          console.log(this.goodslist[index].num)
          if(!this.goodslist[index].num){
            this.$toast('请输入提货数量')
            return
          }
          this.goodslist[index].num ++
        },
        checkzhifutypeFn(){
          var self = this
          self.isgougou = !self.isgougou
        },
        tihupFn(){
          var self = this

          if(!self.iskuaiditype && !self.city_addressid){
            this.$toast('请选择收货地址')
            return
          }
          if(self.iskuaiditype && !self.storeid){
            this.$toast('请选择提货地址')
            return
          }

          self.goodslist.forEach(item => {
            console.log(item.num)
            if(item.num > 0){
              var obj = {}
              obj.goods_id = item.goods_id
              obj.pick_num = item.num
              self.checkorder.push(obj)
            }
          })

          if(self.checkorder.length < 1){
            this.$toast('请输入提货数量')
            return
          }

          self.ischickzhifu = !self.ischickzhifu
          self.iszhifu = !self.iszhifu

        },
        goPayFn(){
          var self = this
          if(this.isgougou){
            this.pay_type = 1
          } else {
            this.pay_type = 2
          }

          this.$util.post('user/postPickGoods',{
            uid: this.$store.state.userinfo.uid,
            pick_goods:JSON.stringify(self.checkorder),
            type: self.iskuaiditype?2: 1,
            store_id: self.storeid,
            address_id: self.city_addressid,
            postage: self.postage,
            pay_type: self.pay_type
          }).then(data => {
            self.ischickzhifu = !self.ischickzhifu
            self.iszhifu = !self.iszhifu
              if(data.data.pay_data){
                WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', {
                    "appId" : data.data.pay_data.appId,       //公众号名称，由商户传入
                    "timeStamp":data.data.pay_data.timeStamp, //时间戳，自1970年以来的秒数
                    "nonceStr" : data.data.pay_data.nonceStr, //随机串
                    "package" : data.data.pay_data.package,
                    "signType" :data.data.pay_data.signType,  //微信签名方式：
                    "paySign" : data.data.pay_data.paySign     //微信签名

                  },
                  function(res){

                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                      this.$toast.text('支付成功', 'middle');
                      setTimeout(function(){window.location.href='https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2MTU1NTgxMg==&scene=124#wechat_redirect'},3000);
                    }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                      this.$.toast.text('取消支付', 'middle');
                    }else if(res.err_msg == "get_brand_wcpay_request:fail" ){
                      this.$toast.text('支付失败', 'middle');
                    }
                  }
                );
              }
          })



        },
        closeFn(){
          var self = this
          self.ischickzhifu = !self.ischickzhifu
          self.iszhifu = !self.iszhifu
          self.tihuofail = !self.tihuofail
        }
      }
    }
</script>

<style lang="less" scoped>
  @import "../../assets/css/public";
  @import "../../assets/css/center/mygoods";

</style>
